import { useState, Suspense,useMemo, useEffect } from 'react'
import './App.css'
import Menu from './views/menu'
import Top from './views/top'
import { useRoutes, useLocation, useNavigate, NavLink } from 'react-router-dom'
import { routes } from './router'


function App() {
  const location =useLocation()
  const hideTop = useMemo(
    () => routes.find((item) => item.path == location.pathname)?.hiddentop,
    [location.pathname]
  );
  const hideMenu = useMemo(
    () => routes.find((item) => item.path == location.pathname)?.hiddennenu,
    [location.pathname]

  );
  return (
    <>
      <div className='box'>
        {
          !hideTop && <Top></Top>
        }
        <div className='middle'>{useRoutes(routes)}</div>
        {
          hideMenu && <Menu></Menu>
        }
      </div>
    </>

  )
}

export default App

